<!-- 工作台部分，对应点击页面跳转需要在component下面的组件自行设置 -->
<template>
	<view class="work-container">
		<!-- header头部 -->
		<view class="header">
			<text class="title">生猪管理系统</text>
		</view>

		<view class="taskManager">
			<view class="taskBackGround">
				<text class="textType">任务管理</text>
				<view class="taskCount">
					<text class="taskCountText">待处理任务数量：12条</text>
					<view class="red_circle"></view><!-- 动态数量可以替换成data中的变量 -->
				</view>
				<view class="buttonContainer">
					<navigator url="/pages/renwuguanli/taskCreation/taskCreation" open-type="navigate">
						<button class="taskButton">定制任务查看</button>
					</navigator>
					<navigator url="/pages/renwuguanli/taskList/taskList" open-type="navigate">
						<button class="taskButton"> + 定制任务发布</button>
					</navigator>>
					
				</view>
			</view>
		</view>
		<!-- 物资管理部分 -->
		<view style="display: flex;width: 100%; justify-content: center;">
			<uni-section title="物资管理" type="square" class="Square">
				<showItem></showItem>
			</uni-section>
		</view>
		<!-- 交易管理部分 -->
		<view style="display: flex;width: 100%; justify-content: center;">
			<uni-section title="交易管理" type="square" class="Square">
				<showItemTrade></showItemTrade>
			</uni-section>
		</view>
		<!-- 猪只管理部分 -->
		<view style="display: flex;width: 100%; justify-content: center;">
			<uni-section title="猪只管理" type="square" class="Square">
				<showItemPigNumber></showItemPigNumber>
			</uni-section>
		</view>
		<!-- 设备管理部分 -->
		<view style="display: flex;width: 100%; justify-content: center;">
			<uni-section title="设备管理" type="square" class="Square">
				<showItemDevice></showItemDevice>
			</uni-section>
		</view>
		<!-- 生物安全部分 -->
		<view style="display: flex;width: 100%; justify-content: center;">
			<uni-section title="生物安全" type="square" class="Square">
				<showItemBiosecurity></showItemBiosecurity>
			</uni-section>
		</view>
	</view>
</template>

<script>
	import showItem from './component/showItem.vue'
	import showItemTrade from './component/showItem_trade.vue'
	import showItemPigNumber from './component/showItem_pig_num.vue'
	import showItemDevice from './component/showItem_device.vue'
	import showItemBiosecurity from './component/showItem_Biosecurity.vue'
	export default {
		components: {
			showItem,
			showItemTrade,
			showItemPigNumber,
			showItemDevice,
			showItemBiosecurity
		},

		data() {
			return {


				data: []
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	/* #ifndef APP-NVUE */
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #fff;
		min-height: 100%;
		height: auto;
	}

	view {
		font-size: 14px;
		line-height: inherit;
	}

	.work-container {
		width: 100%;

	}

	.header {
		width: 100%;
		height: 100rpx;
		background-color: #0070ff;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.header .title {
		font-size: 36rpx;
		color: #ffffff;
		font-weight: bold;
	}

	.taskManager {
		display: flex;
		width: 100%;
		height: 100px;
		background-color: #ffffff;
		margin-top: 20rpx;
		justify-content: center;
		position: relative;
	}

	.taskManager .taskBackGround {
		width: 93%;
		height: 200rpx;
		background-color: #0070ff;
		border-width: 1px;
		border-color: rgb(121, 121, 121);
		border-style: solid;
		border-radius: 4.5px;
	}

	.taskManager .taskBackGround .textType {
		font-size: 30rpx;
		text-align: left;
		color: rgb(242, 242, 242);
		white-space: nowrap;
		word-break: normal;
		transform-origin: left top;
		position: absolute;
		top: 20rpx;
		left: 45rpx;
	}

	/* 待处理任务数量部分 */
	.taskCount {
		position: absolute;
		top: 70rpx;
		/* 可调整位置 */
		left: 45rpx;
	}

	.taskCountText {
		font-size: 30rpx;
		color: rgb(242, 242, 242);
		padding-left: 50rpx;
	}
	.Square{
		width: 90%;
		margin-top: 20px;
		border: 1rpx solid #000000;
	}


	.red_circle {
		width: 8px;
		height: 8px;
		background-color: rgb(250, 81, 81);
		border-width: 1px;
		border-color: rgb(255, 255, 255);
		border-style: solid;
		border-radius: 50%;
		position: absolute;
		top: -7rpx;
		right: -15rpx;
	}

	.buttonContainer {
		width: 70%;
		position: absolute;
		top: 130rpx;
		left: 80rpx;
		display: flex;
		gap: 25rpx;
	}

	.taskButton {
		width: 300rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		color: #ffffff;
		background-color: #0072ab;
		padding: 10rpx 20rpx;
		font-size: 24rpx;
		height: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		border-style: solid;
		border-color: #000000;
		border-width: 1px;
	}

	/* #endif */

	.uni-margin-wrap {
		width: 690rpx;
		width: 100%;
		;
	}
</style>